<template>
  <div class="homework-container">
    <div class="search-box">
      <van-search v-model="searchText" placeholder="搜索课程、作业" @search="onSearch" />
    </div>

    <div class="tabs">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: activeTab === tab.id }"
        @click="getHomeworkByType(tab.id)"
      >
        {{ tab.name }}
      </button>
    </div>

    <div class="assignment-list">
      <div v-for="homework in homeworkList" :key="homework.id" class="assignment-item">
        <div class="assignment-info">
          <h3>{{ homework.homeworkTitle }}</h3>
          <p>{{ homework.homeworkContent }}</p>
          <div class="meta">
            <span>时间: {{ homework.homeworkDeadline }}</span>
            <span>教练: {{ homework.teacherName }}</span>
          </div>
        </div>
        <div class="assignment-status">
          <span :class="getStatusClass(homework.homeworkFlag)">{{
            getStatusText(homework.homeworkFlag)
          }}</span>
          <div class="detail-btn" @click="viewDetails(homework)">查看详情 ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { getHomework } from '@/api/course'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchText = ref('')
const onSearch = (val: string) => {
  console.log('搜索内容:', val, searchText.value)
  getHomeworkByType(activeTab.value)
}
interface Assignment {
  id: number
  homeworkTitle: string
  homeworkContent: string
  homeworkDeadline: string
  teacherName: string
  homeworkFlag: '0' | '1' | '2'
  homeworkType: '1' | '2' | '3' | '4' | ''
}

const tabs = ref([
  { id: '', name: '全部' },
  { id: '1', name: '技战术学习' },
  { id: '2', name: '体能练习' },
  { id: '3', name: '调研报告' },
  { id: '4', name: '其他' },
])

const activeTab = ref('')

const getStatusClass = (status: string) => {
  return {
    '0': 'not-started',
    '1': 'in-progress',
    '2': 'completed',
  }[status]
}
const getStatusText = (status: string) => {
  return {
    '0': '未提交',
    '1': '已提交',
    '2': '已批改',
  }[status]
}

const viewDetails = (assignment: Assignment) => {
  console.log('Viewing details for:', assignment)
  // Navigation logic would go here
  router.push('/homeworkDetail?id=' + assignment.id)
}
const homeworkList = ref<Assignment[]>()
const getHomeworkByType = async (homeworkType: string) => {
  activeTab.value = homeworkType
  const params = {
    homeworkType: homeworkType,
    homeworkTitle: searchText.value,
  }
  const res = await getHomework(params)
  homeworkList.value = res.data.listHomework
}
onMounted(() => {
  getHomeworkByType('')
})
</script>

<style scoped lang="scss">
.homework-container {
  display: flex;
  flex-direction: column;
  padding: 15px;
  height: calc(100% - 40px);
}
.search-box {
  margin-bottom: 10px;
}

.header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  gap: 10px;
}

.search-bar input,
.search-bar button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
}

.tabs button {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
  cursor: pointer;
}

.tabs button.active {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}

.assignment-list {
  //display: flex;
  //flex-direction: column;
  // gap: 15px;
  height: calc(100% - 110px);
  overflow: auto;
}

.assignment-item {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: white;
  margin-bottom: 10px;
}
.assignment-info {
  width: 70%;
  h3 {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #1f2937;
  }
  p {
    margin: 0 0 8px 0;
    color: #666;
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 控制显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #999;
  }
}
.assignment-status {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* align-items: flex-end; */
  gap: 8px;
  .detail-btn {
    line-height: 14px;
    height: 14px;
    font-size: 12px;
    color: #3b82f6;
  }
}

.assignment-status span {
  padding: 2px 0px;
  text-align: center;
  border-radius: 10px;
  font-size: 12px;
  &.completed {
    background: #dcfce7;
    color: #15803d;
  }
  &.in-progress {
    background: #fef9c3;
    color: #a16207;
  }
  &.not-started {
    background: #fee2e2;
    color: #b91c1c;
  }
}
/*
.assignment-status span.completed {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.assignment-status span.in-progress {
  background: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
} */
</style>
